<template>
	<view class="ex-text">
		<text @click="change" :class="{extxt:!isExtensible,txt:true}" :style="{fontSize:size+'px'}">
			{{ title }}
		</text>
	</view>
</template>

<script>
	export default {
		name: "ex-text",

		data() {
			return {
				isExtensible: false
			};
		},
		props: {
			title: {
				default: "",
				type: String
			},
			size: {
				default: 14,
				type: Number
			}
		},
		methods: {
			change() {
				this.isExtensible = !this.isExtensible
			}
		}
	}
</script>

<style scoped>
	.ex-text .txt {
		word-break: break-all;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.ex-text .extxt {
		overflow: hidden;
		text-overflow: ellipsis;
		lines: 4;
		max-lines: 4;
		-webkit-line-clamp: 4;
	}
</style>
